/*
 * 全时云商务服务股份有限公司.
 * Copyright © 2021 京icp备08005473号. All rights reserved.
 * @Date: 2021-09-02.
 * @Author：
 * @Description 小课堂 - 课程卡片 - 组件
 **/
import React, { memo } from "react"
import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'

interface Props {
  setUrl: string // 设置上课 时间
  detailUrl: string // 详情页地址
  id?: string // 设置项的 key值
  label?: string // label
}
/**
 *@Description
 *@Return  课程卡片.
 **/
const CourseCard: React.FC<Props> = props => {
  /**
   *@Description
   *@Return  点击 课程列表 - 跳转到详情页.
  **/
 const renderNavigateClick = () => {
  Taro.redirectTo({
    url: props.detailUrl,
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      console.log("课程详情-----", res)
    }
  })
 }
 /**
   *@Description
   *@Return  设置上课日期.
  **/
  const handleSetClick = (ev) => {
    ev.stopPropagation()
    Taro.redirectTo({
      url: props.setUrl,
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        console.log("设置上课时间---", res)
      }
    })
  }
  return (
    <View className='cou-card' onClick={renderNavigateClick}>
      {/* 图片区域 */}
      <View className='cou-card-img' >
        <Image src='https://tse3-mm.cn.bing.net/th/id/OIP-C.7n9maUPX84tlG0VV-vHQFAHaEo?pid=ImgDet&rs=1'></Image>
        <View className='cou-card-status'>
          <Text>审批中</Text>
        </View>
      </View>

      {/* 标题 课程信息 */}
      <View className='cou-card-info'>
        <View className='cou-card-title'>创新与天才最多十个字创新与天才最多十个字创新与天才最多十个字</View>
        <View className='cou-card-time'>
          <Text className='cou-card-mode orange'>1对1</Text>
          <Text>·09-02（周三）10:10-12:00</Text>
        </View>
        {/* 价格 */}
        <Text className='cou-card-price'><Text>￥</Text>9800</Text>
      </View>
          {/* tips */}
        <View className='cou-card-tips'>
          <View className='cou-card-tip' onClick={handleSetClick}>
            课程还未设置上课日期，快去设置吧
            <Text className='at-icon at-icon-chevron-right'></Text>
          </View>
        </View>
    </View>
  )
}

export default memo(CourseCard)

